<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
		<style>
			div[class]{
				color: green;
			}
			
			div[class="div2"]{
				/*完全匹配特定属性和属性的值*/
				color: red;
			}
			
			div[class~="div2"]{
				/*
				 	匹配两种情况
				 	1.属于空格隔开列表的 其中一员。
				 	2.只有唯一一个属性值就是指定的值。
				 * */
				color: ;
			}
			
			div[class*="div"]{
				font-size: 100px;
			}
			
			div[class^="d"]{
				background: red;
			}
			
			div[class$="3"]{
				background: purple;
			}
			
			div[class|="bgg"]{
				/*
				 匹配两种情况
				 1.有且只有一个，且符合特定的值
				 2.带有特定值，且后面跟上"-"
				 boostrap等别的框架会用到这个属性选择器。
				 * */
				
			}
	</head>
	<body>
		<div class>测试1</div>
		<div class="div2">测试2</div>
		<div class="div2 div3">测试3</div>
		<div class="bgg- bgg2">测试4</div>
	</body>
</html>
